<template>
  <uni-popup ref="notePopRef" type="center">
    <div class='note'>
      <div class="text-input">
        <textarea cols="30" ref="textareaRef" rows="10" :value="params.note"
          placeholder-style="color:rgb(187,187,187);font-size:28rpx" placeholder="请输入备注信息..."
          @input="handleNoteChange" />
      </div>
      <div class="btn">
        <button @click="closeNotePopup">取消</button>
        <button @click="commitNote('ensure')">确认</button>
      </div>
    </div>
  </uni-popup>
</template>

<script>
  import {
    insertNoteApi
  } from '@/api/praise.js'
  export default {
    data() {
      return {
        params: {
          note: ''
        }
      }
    },
    methods: {
      openNotePopup(params, type) {
        this.params = {
          ...params,
        }
        if (type === 'delete') {
          this.params.note = ''
          this.commitNote('delete')
        } else {
          this.$refs.notePopRef.open('center')
        }
      },
      handleNoteChange(e) {
        this.$set(this.params, 'note', e.target.value)
      },
      closeNotePopup() {
        this.$refs.notePopRef.close('center')
      },
      async commitNote(type) {
        if (type !== 'delete' && !this.params.note) {
          return uni.showToast({
            icon: 'none',
            title: '备注信息不能为空！'
          })
        }
        const {
          code,
          data
        } = await insertNoteApi(this.params)
        if (code === '000000') {
          uni.showToast({
            title: type==='delete' ? "已删除该备注" : "已添加备注"
          })
          this.$emit('change', this.params)
          this.closeNotePopup()
        }else{
          uni.showToast({
            title: '含有非法字符，请去除后重试'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  :deep(view) {
    background-color: rgba(0, 0, 0, 0.2);
  }

  .note {
    width: 660rpx;
    background-color: #fff;
    border-radius: 10rpx;

    .text-input {
      border-radius: 10rpx;
      background-color: #fff;
      padding: 30rpx;
      border-bottom: 1px solid rgb(197, 197, 197);
    }

    .btn {
      display: flex;

      button {
        width: 50%;
        font-weight: bold;
        font-size: 28rpx;
        border: none;
        line-height: 80rpx;
        background-color: #fff;

        &:last-child {
          background-color: #000;
          color: #fff;
        }
      }
    }
  }
</style>
